<template>
  <div class="w-full flex">
    <div class="" :style="{ width: tabsShow ? '35%' : '100%' }">
      <publicPageVue v-if="Object.keys(pageSetting).length > 0" :json-obj="pageSetting" name="ApplyList" :tables="tables" />
    </div>
    <div
      class="relative w-0"
      style="margin-left: 0.5rem; padding: 15px"
      :style="{ display: tabsShow ? 'block' : 'none', width: tabsShow ? '65%' : '' }"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="(v, index) in tabsList" :key="index" :label="v.label" :name="v.name">
          <el-button style="margin-bottom: 15px" type="primary" @click="save">{{ translateTitle('Dams.ApplicationInterface.新增') }}</el-button>
          <el-button v-if="v.name == '1'" style="margin-bottom: 15px" type="primary" @click="copy">
            {{ translateTitle('Dams.ApplicationInterface.复制') }}
          </el-button>
          <Table
            :btn-fix="true"
            :column-list="v.tableColumn"
            :get-height="getHeight"
            :name="v.tables.name"
            :style="{ height: `${getHeight}px` }"
            :tables="v.tables"
          />
        </el-tab-pane>
      </el-tabs>
      <vui-icon class="absolute cursor-pointer" icon="close-circle-line" style="top: 0; right: 10px" @click="backTab" />
    </div>
    <el-dialog v-if="newAddDialog" v-model="newAddDialog" :title="translateTitle('Dams.ApplicationInterface.新增')" width="80%">
      <Forms ref="subForm" :data-from="dataForm" label-position="top" :list="formObj" name="ApplyList" :type="typeForm" />
    </el-dialog>
    <el-dialog v-if="copyDialog" v-model="copyDialog" :title="translateTitle('Dams.ApplicationInterface.复制')" width="80%">
      <div>
        <span>{{ translateTitle('Dams.ApplicationInterface.选择应用') }}</span>
        <el-select v-model="applyValue" :placeholder="translateTitle('Dams.ApplicationInterface.请选择')" @change="applyChange">
          <el-option v-for="item in applyList" :key="item.APP_CODE" :label="item.APP_NAME" :value="item.APP_CODE" />
        </el-select>
      </div>
      <div style="margin-top: 15px">
        <span>{{ translateTitle('Dams.ApplicationInterface.选择常量') }}</span>
        <el-select v-model="constValue" multiple :placeholder="translateTitle('Dams.ApplicationInterface.请选择')">
          <el-option v-for="item in constList" :key="item.CONSTANT_CODE" :label="item.CONSTANT_CODE" :value="item.CONSTANT_CODE" />
        </el-select>
      </div>
      <div class="text-center" style="margin-top: 15px">
        <el-button type="primary" @click="confirmCopy">{{ translateTitle('Dams.ApplicationInterface.确定') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'

  import { Mixin } from '@/common/minxin/Mixin'
  import { GFCD } from '@/utils/utils'
  import publicPageVue from '../../components/publicPage.vue'
  import debounce from 'lodash/debounce'
  import { getList } from '../../api/home'
  import Forms from '../../components/forms'
  import Table from '../../components/table.vue'
  import ApplyList from '../../components/json/ApplyList'
  export default {
    name: 'ApplyList',
    components: { publicPageVue, Table, Forms },
    mixins: [Mixin],
    data() {
      return {
        applyValue: '',
        constValue: [],
        constList: [],
        copyDialog: false,
        tables: {
          tableList: [],
          count: 0,
          pageSize: 50,
          limit: 1,
          name: 'ApplyList',
          operation: false,
          isNew: true,
          width: '150',
          myselfOperation: true,
        },
        typeForm: 'add',
        newAddDialog: false,
        pageSetting: {},
        configSetting: {},
        tabsShow: false,
        activeName: '1',
        activeIndex: 0,
        unsubs: [],
        clientHeight: 0,
        tabsList: [
          {
            tables: {
              tableList: [],
              count: 0,
              pageSize: 50,
              limit: 1,
              name: 'constApplyList',
              operation: false,
              isNew: true,
              width: '150',
              myselfOperation: true,
            },
            tableColumn: [
              { label: translateTitle('Dams.ApplicationInterface.常量code'), porp: 'CONSTANT_CODE' },
              { label: translateTitle('Dams.ApplicationInterface.常量名称'), porp: 'CONSTANT_NAME' },
              { label: translateTitle('Dams.ApplicationInterface.常量SQL'), porp: 'CONSTANT_SQL' },
            ],
            label: translateTitle('Dams.ApplicationInterface.应用常量'),
            name: '1',
            methodQuery: 'dams.appConstant.query',
            methodAdd: 'dams.appConstant.save',
            methodUpdate: 'dams.appConstant.update',
            methodDelete: 'dams.appConstant.delete',
            filedList: {
              form: {
                name: 'ApplyList',
                field: [
                  {
                    type: 'input',
                    name: 'CONSTANT_CODE',
                    label: translateTitle('Dams.ApplicationInterface.常量code'),
                    labelHidden: false,
                    isRules: true,
                    disabled_edit: true,
                  },
                  {
                    type: 'input',
                    name: 'CONSTANT_NAME',
                    label: translateTitle('Dams.ApplicationInterface.常量名称'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'select',
                    name: 'DATA_TYPE',
                    label: translateTitle('Dams.ApplicationInterface.数据来源'),
                    labelHidden: false,
                    isRules: true,
                    options: [
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.SQL查询'),
                        CODE: '1',
                      },
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.前端传值'),
                        CODE: '2',
                      },
                    ],
                  },
                  {
                    type: 'input',
                    name: 'DATA_SOURCE',
                    label: translateTitle('Dams.ApplicationInterface.数据源'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'textarea',
                    name: 'CONSTANT_SQL',
                    label: translateTitle('Dams.ApplicationInterface.常量SQL'),
                    labelHidden: false,
                    isRules: true,
                  },
                  // {
                  //   type: 'button',
                  //   label: '校验SQL',
                  //   labelHidden: true,
                  // },
                  {
                    type: 'button',
                    label: translateTitle('Dams.ApplicationInterface.提交'),
                    labelHidden: true,
                    isRules: true,
                  },
                ],
              },
            },
          },
          {
            tables: {
              tableList: [],
              count: 0,
              pageSize: 50,
              limit: 1,
              name: 'constApplyList',
              operation: false,
              isNew: true,
              width: '150',
              myselfOperation: true,
              clientHeight: 0,
            },
            tableColumn: [
              { label: translateTitle('Dams.ApplicationInterface.下拉code'), porp: 'SELECT_CODE' },
              { label: translateTitle('Dams.ApplicationInterface.下拉名称'), porp: 'SELECT_NAME' },
              { label: translateTitle('Dams.ApplicationInterface.下拉SQL'), porp: 'SELECT_SQL' },
            ],
            label: translateTitle('Dams.ApplicationInterface.应用下拉'),
            name: '2',
            methodQuery: 'dams.appSelect.query',
            methodAdd: 'dams.appSelect.save',
            methodUpdate: 'dams.appSelect.update',
            methodDelete: 'dams.appSelect.delete',
            filedList: {
              form: {
                name: 'ApplyList',
                field: [
                  {
                    type: 'input',
                    name: 'SELECT_CODE',
                    label: translateTitle('Dams.ApplicationInterface.下拉code'),
                    labelHidden: false,
                    isRules: true,
                    disabled_edit: true,
                  },
                  {
                    type: 'input',
                    name: 'SELECT_NAME',
                    label: translateTitle('Dams.ApplicationInterface.下拉名称'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'input',
                    name: 'DATA_SOURCE',
                    label: translateTitle('Dams.ApplicationInterface.数据源'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'select',
                    name: 'SWITCH_IN_APP',
                    label: translateTitle('Dams.ApplicationInterface.是否可以切换'),
                    labelHidden: false,
                    isRules: true,
                    options: [
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.可以切换'),
                        CODE: 'Y',
                      },
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.不切换'),
                        CODE: 'N',
                      },
                    ],
                  },
                  {
                    type: 'input',
                    name: 'SORT',
                    label: translateTitle('Dams.ApplicationInterface.排序'),
                    labelHidden: false,
                  },
                  {
                    type: 'textarea',
                    name: 'SELECT_SQL',
                    label: translateTitle('Dams.ApplicationInterface.下拉SQL'),
                    labelHidden: false,
                    isRules: true,
                  },
                  // {
                  //   type: 'button',
                  //   label: '校验SQL',
                  //   labelHidden: true,
                  // },
                  {
                    type: 'button',
                    label: translateTitle('Dams.ApplicationInterface.提交'),
                    labelHidden: true,
                  },
                ],
              },
            },
          },
          {
            tables: {
              tableList: [],
              count: 0,
              pageSize: 50,
              limit: 1,
              name: 'constApplyList',
              operation: false,
              isNew: true,
              width: '150',
              myselfOperation: true,
              clientHeight: 0,
            },
            tableColumn: [
              { label: translateTitle('Dams.ApplicationInterface.应用端code'), porp: 'ENTRANCE_CODE' },
              { label: translateTitle('Dams.ApplicationInterface.应用端名称'), porp: 'ENTRANCE_NAME' },
            ],
            label: translateTitle('Dams.ApplicationInterface.应用端'),
            name: '3',
            methodQuery: 'dams.appEntrance.query',
            methodAdd: 'dams.appEntrance.save',
            methodUpdate: 'dams.appEntrance.update',
            methodDelete: 'dams.appEntrance.delete',
            filedList: {
              form: {
                name: 'ApplyList',
                field: [
                  {
                    type: 'input',
                    name: 'ENTRANCE_CODE',
                    label: translateTitle('Dams.ApplicationInterface.应用端code'),
                    labelHidden: false,
                    isRules: true,
                    disabled_edit: true,
                  },
                  {
                    type: 'input',
                    name: 'ENTRANCE_NAME',
                    label: translateTitle('Dams.ApplicationInterface.应用端名称'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'button',
                    label: translateTitle('Dams.ApplicationInterface.提交'),
                    labelHidden: true,
                  },
                ],
              },
            },
          },
          {
            tables: {
              tableList: [],
              count: 0,
              pageSize: 50,
              limit: 1,
              name: 'constApplyList',
              operation: false,
              isNew: true,
              width: '150',
              myselfOperation: true,
              clientHeight: 0,
            },
            tableColumn: [
              { label: translateTitle('Dams.ApplicationInterface.数据授权code'), porp: 'RESTRICT_CODE' },
              { label: translateTitle('Dams.ApplicationInterface.数据授权描述'), porp: 'RESTRICT_MESSAGE' },
              { label: translateTitle('Dams.ApplicationInterface.数据授权SQL'), porp: 'RESTRICT_SQL' },
            ],
            label: translateTitle('Dams.ApplicationInterface.数据授权'),
            name: '4',
            methodQuery: 'dams.appRestrict.query',
            methodAdd: 'dams.appRestrict.save',
            methodUpdate: 'dams.appRestrict.update',
            methodDelete: 'dams.appRestrict.delete',
            filedList: {
              form: {
                name: 'ApplyList',
                field: [
                  {
                    type: 'input',
                    name: 'RESTRICT_CODE',
                    label: translateTitle('Dams.ApplicationInterface.数据授权code'),
                    labelHidden: false,
                    isRules: true,
                    disabled_edit: true,
                  },
                  {
                    type: 'input',
                    name: 'RESTRICT_MESSAGE',
                    label: translateTitle('Dams.ApplicationInterface.数据授权描述'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'input',
                    name: 'DATA_SOURCE',
                    label: translateTitle('Dams.ApplicationInterface.数据源'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'textarea',
                    name: 'RESTRICT_SQL',
                    label: translateTitle('Dams.ApplicationInterface.数据授权SQL'),
                    labelHidden: false,
                    isRules: true,
                  },
                  // {
                  //   type: 'button',
                  //   label: '校验SQL',
                  //   labelHidden: true,
                  // },
                  {
                    type: 'button',
                    label: translateTitle('Dams.ApplicationInterface.提交'),
                    labelHidden: true,
                  },
                ],
              },
            },
          },
          {
            tables: {
              tableList: [],
              count: 0,
              pageSize: 50,
              limit: 1,
              name: 'constApplyList',
              operation: false,
              isNew: true,
              width: '150',
              myselfOperation: true,
              clientHeight: 0,
            },
            tableColumn: [
              { label: translateTitle('Dams.ApplicationInterface.数据返回code'), porp: 'RETURN_DATA_CODE' },
              { label: translateTitle('Dams.ApplicationInterface.数据返回名称'), porp: 'RETURN_DATA_NAME' },
            ],
            label: translateTitle('Dams.ApplicationInterface.数据返回'),
            name: '5',
            methodQuery: 'dams.entranceReturn.query',
            methodAdd: 'dams.entranceReturn.save',
            methodUpdate: 'dams.entranceReturn.update',
            methodDelete: 'dams.entranceReturn.delete',
            filedList: {
              form: {
                name: 'ApplyList',
                field: [
                  {
                    type: 'input',
                    name: 'RETURN_DATA_CODE',
                    label: translateTitle('Dams.ApplicationInterface.数据返回code'),
                    labelHidden: false,
                    isRules: true,
                    disabled_edit: true,
                  },
                  {
                    type: 'input',
                    name: 'RETURN_DATA_NAME',
                    label: translateTitle('Dams.ApplicationInterface.数据返回名称'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'select',
                    name: 'DATA_TYPE',
                    label: translateTitle('Dams.ApplicationInterface.数据来源'),
                    labelHidden: false,
                    isRules: true,
                    options: [
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.SQL查询'),
                        CODE: '1',
                      },
                      {
                        LABEL: translateTitle('Dams.ApplicationInterface.前端传值'),
                        CODE: '2',
                      },
                    ],
                  },
                  {
                    type: 'input',
                    name: 'DATA_SOURCE',
                    label: translateTitle('Dams.ApplicationInterface.数据源'),
                    labelHidden: false,
                    isRules: true,
                  },
                  {
                    type: 'textarea',
                    name: 'RETURN_DATA_SQL',
                    label: translateTitle('Dams.ApplicationInterface.数据返回SQL'),
                    labelHidden: false,
                    isRules: true,
                  },
                  // {
                  //   type: 'button',
                  //   label: '校验SQL',
                  //   labelHidden: true,
                  // },
                  {
                    type: 'button',
                    label: translateTitle('Dams.ApplicationInterface.提交'),
                    labelHidden: true,
                  },
                ],
              },
            },
          },
        ],
        dataForm: {},
        formObj: {},
        appCode: '',
        sqlTest: false,
        applyList: [],
      }
    },
    computed: {
      getHeight() {
        return `${this.clientHeight - 40 - 30 - 40 - 30 - 120}`
      },
    },
    created() {
      this.init()
      this.formObj = this.tabsList[0].filedList
    },
    methods: {
      translateTitle,
      backTab() {
        this.tabsShow = false
        this.activeName = '1'
        this.activeIndex = 0
      },
      copy() {
        console.log(this.tables.tableList)
        this.applyList = this.tables.tableList.filter((el) => el.APP_CODE != this.appCode)
        console.log(this.applyList)
        this.constValue = []
        this.applyValue = ''
        this.copyDialog = true
      },
      async confirmCopy() {
        console.log(this.constValue, this.appCode)
        if (this.constValue.length == 0) return
        let list = this.constList.filter((el) => this.constValue.find((e) => e == el.CONSTANT_CODE))
        list.forEach((r) => {
          r.APP_CODE = this.appCode
          r.DATA_SOURCE = this.appCode
        })
        let method = 'dams.appConstant.save'
        await getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          data: JSON.stringify(list),
          method: method,
        })
        this.copyDialog = false
        this.getConstList()
        console.log(list)
      },
      applyChange(e) {
        this.constList = []
        getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          data: JSON.stringify({ '#LIMIT#': 1, '#PAGE_SIZE#': 50, APP_CODE: e }),
          method: 'dams.appConstant.query',
        })
          .then((res) => {
            console.log(res.data['dams.appConstant.query'].data)
            res.data['dams.appConstant.query'].data.forEach((r) => {
              if (!this.tabsList[0].tables.tableList.find((el) => el.CONSTANT_CODE == r.CONSTANT_CODE)) {
                this.constList.push(r)
              }
            })
          })
          .catch((e) => {
            console.log(e)
            this.sqlTest = false
          })
      },
      save() {
        this.sqlTest = false
        this.typeForm = 'add'
        this.newAddDialog = true
        this.formObj = this.tabsList[this.activeIndex].filedList
        this.dataForm = {}
      },
      async confirmNewAdd(obj) {
        // if (!this.sqlTest) {
        //   this.$message({
        //     message: '请先进行sql验证',
        //     type: 'warning',
        //   })
        //   return
        // }
        let method = ''
        if (this.dataForm['_X_ROW_KEY']) {
          method = this.tabsList[this.activeIndex].methodUpdate
        } else {
          method = this.tabsList[this.activeIndex].methodAdd
        }
        let res = await getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          data: JSON.stringify({ ...obj, APP_CODE: this.appCode }),
          method: method,
        })
        this.newAddDialog = false
        this.getConstList()
        console.log(res)
      },
      async getConstList() {
        let res = await getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          data: JSON.stringify({
            '#LIMIT#': this.tabsList[this.activeIndex].tables.limit,
            '#PAGE_SIZE#': this.tabsList[this.activeIndex].tables.pageSize,
            APP_CODE: this.appCode,
          }),
          method: this.tabsList[this.activeIndex].methodQuery,
        })
        this.tabsList[this.activeIndex].tables.tableList = res.data[this.tabsList[this.activeIndex].methodQuery].data
        this.tabsList[this.activeIndex].tables.count = res.data[this.tabsList[this.activeIndex].methodQuery].count
      },
      windowResize: debounce(function () {
        this.clientHeight = document.documentElement.clientHeight
      }, 100),
      init() {
        this.configSetting = GFCD('dams')
        // this.nowJsonData().then((data) => {
        //   console.log(data)
        // })
        this.windowResize()
        this.eventInit()
        this.getLanguage()
      },
      async getLanguage() {
        let res = await getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
          data: JSON.stringify({
            '#LIMIT#': 1,
            '#PAGE_SIZE#': 99999,
            SUB_SYSTEM: 'DAMS',
          }),
          method: 'dams.language.pack.select.query',
        })
        this.pageSetting = ApplyList
        console.log(res)
      },
      eventInit() {
        this.$sub(`ApplyList_forms_changeSelect_ApplyList`, (data_arr) => {
          console.log(data_arr)
          if (this.activeIndex == 0 || this.activeIndex == 4) {
            if (data_arr[0].e == '1') {
              console.log(this.tabsList[this.activeIndex].filedList.form.field)
              if (
                this.tabsList[this.activeIndex].filedList.form.field.length == 5 ||
                this.tabsList[this.activeIndex].filedList.form.field.length == 6
              )
                return
              this.tabsList[this.activeIndex].filedList.form.field.splice(
                3,
                0,
                {
                  type: 'input',
                  name: 'DATA_SOURCE',
                  label: translateTitle('Dams.ApplicationInterface.数据源'),
                  labelHidden: false,
                  isRules: true,
                },
                {
                  type: 'textarea',
                  name: 'CONSTANT_SQL',
                  label: translateTitle('Dams.ApplicationInterface.常量SQL'),
                  labelHidden: false,
                  isRules: true,
                }
                // {
                //   type: 'button',
                //   label: '校验SQL',
                //   labelHidden: true,
                // }
              )
            } else {
              if (
                this.tabsList[this.activeIndex].filedList.form.field.length == 2 ||
                this.tabsList[this.activeIndex].filedList.form.field.length == 3
              )
                return
              this.tabsList[this.activeIndex].filedList.form.field.splice(3, 2)
            }
          }
        })
        this.unsubs.push(`ApplyList_forms_changeSelect_ApplyList`)
        this.$sub(`constApplyList_Table_on_constApplyList`, (data_arr) => {
          console.log(data_arr)
          this.tabsList[this.activeIndex].tables.limit = data_arr[0].limit
          this.tabsList[this.activeIndex].tables.pageSize = data_arr[0].pageSize
          this.getConstList()
        })
        this.unsubs.push(`constApplyList_Table_on_constApplyList`)
        this.$sub(`constApplyList_Table_editBtn_constApplyList`, (data_arr) => {
          this.sqlTest = false
          this.typeForm = 'edit'
          this.dataForm = data_arr[0]
          this.newAddDialog = true
          this.formObj = this.tabsList[this.activeIndex].filedList
        })
        this.unsubs.push(`constApplyList_Table_editBtn_constApplyList`)
        this.$sub(`constApplyList_Table_delBtn_constApplyList`, (data_arr) => {
          let obj = { APP_CODE: this.appCode }
          for (const key in data_arr[0]) {
            if (key != 'APP_CODE' && key.indexOf('_CODE') > -1) {
              obj[key] = data_arr[0][key]
            }
          }
          this.$confirm(`${translateTitle('Dams.ApplicationInterface.确定删除')}`, translateTitle('Dams.ApplicationInterface.提示'), {
            confirmButtonText: translateTitle('Dams.ApplicationInterface.确定'),
            cancelButtonText: translateTitle('Dams.ApplicationInterface.取消'),
            type: 'warning',
          }).then(async () => {
            let res = await getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
              data: JSON.stringify(obj),
              method: this.tabsList[this.activeIndex].methodDelete,
            })
            console.log(res)
            this.$message({
              type: 'success',
              message: `${translateTitle('Dams.ApplicationInterface.删除成功')}!`,
            })
            this.getConstList()
          })
        })
        this.unsubs.push(`constApplyList_Table_delBtn_constApplyList`)
        this.$sub(`ApplyList_myselfOperation`, (data_arr) => {
          this.tabsShow = true
          this.appCode = data_arr[0].APP_CODE
          this.getConstList()
        })
        this.unsubs.push(`ApplyList_myselfOperation`)
        this.$sub('ApplyList_forms_on_ApplyList', (data) => {
          console.log(data[0])
          if (data[0] == '校验SQL') {
            let obj = ''
            for (const key in this.dataForm) {
              if (key.indexOf('_SQL') > -1) {
                obj = this.dataForm[key]
              }
            }
            getList(`${this.configSetting.domain}${this.configSetting.baseUrl}`, {
              data: JSON.stringify({ DB_ID: this.appCode, SQL_TXT: obj }),
              method: 'dams.custom.sqlTest',
            })
              .then((res) => {
                if (res.code == '00000') {
                  this.sqlTest = true
                  this.$message({
                    message: res.msg,
                    type: 'success',
                  })
                } else {
                  this.sqlTest = false
                  this.$message({
                    message: translateTitle('Dams.ApplicationInterface.校验失败'),
                    type: 'error',
                  })
                }
              })
              .catch((e) => {
                console.log(e)
                this.sqlTest = false
              })
          } else {
            this.confirmNewAdd(data[0])
          }
        })
        this.unsubs.push(`ApplyList_forms_on_ApplyList`)
      },
      handleClick(e) {
        this.activeIndex = e.index
        this.getConstList()
      },
    },
  }
</script>
<style lang="scss" scoped>
  :deep() {
    .el-dialog__body {
      .style_ApplyList {
        .item_button {
          display: block !important;
          width: 100% !important;
          text-align: center;
        }
      }
    }
    .el-tabs__item {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
    }
  }
</style>
